vue进阶

2023-06-10 13:01| 来源: 网络整理| 查看: 265

vue进阶——整合富文本编辑器wangEditor 前言一、什么是wangEditor？二、安装wangEditor1. React2. Vue23. Vue34. CDN 三、基本使用1. vue22. vue3 四、文件上传问题

前言

个人整合wangEditor过程中的经验与总结

一、什么是wangEditor？

wangEditor是一款基于JavaScript的富文本编辑器插件，用于在网页中实现所见即所得的编辑功能。它提供了丰富的编辑功能，包括文字样式设置、插入图片、插入表格、代码高亮等。wangEditor易于集成和使用，支持自定义配置和扩展。

二、安装wangEditor 1. React yarn add @wangeditor/editor-for-react # 或者 npm install @wangeditor/editor-for-react --save 2. Vue2 yarn add @wangeditor/editor-for-vue # 或者 npm install @wangeditor/editor-for-vue --save 3. Vue3 yarn add @wangeditor/editor-for-vue@next # 或者 npm install @wangeditor/editor-for-vue@next --save 4. CDN var E = window.wangEditor; // 全局变量三、基本使用 1. vue2 import Vue from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' export default Vue.extend({ components: { Editor, Toolbar }, data() { return { editor: null, html: '

hello

', toolbarConfig: { }, editorConfig: { placeholder: '请输入内容...' }, mode: 'default', // or 'simple' } }, methods: { onCreated(editor) { this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错 }, }, mounted() { // 模拟 ajax 请求，异步渲染编辑器 setTimeout(() => { this.html = '

模拟 Ajax 异步设置内容 HTML

' }, 1500) }, beforeDestroy() { const editor = this.editor if (editor == null) return editor.destroy() // 组件销毁时，及时销毁编辑器 } }) 2. vue3 import '@wangeditor/editor/dist/css/style.css' // 引入 css import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' export default { components: { Editor, Toolbar }, setup() { // 编辑器实例，必须用 shallowRef const editorRef = shallowRef() // 内容 HTML const valueHtml = ref('

hello

') // 模拟 ajax 异步获取内容 onMounted(() => { setTimeout(() => { valueHtml.value = '

模拟 Ajax 异步设置内容

' }, 1500) }) const toolbarConfig = {} const editorConfig = { placeholder: '请输入内容...' } // 组件销毁时，也及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return editor.destroy() }) const handleCreated = (editor) => { editorRef.value = editor // 记录 editor 实例，重要！ } return { editorRef, valueHtml, mode: 'default', // 或 'simple' toolbarConfig, editorConfig, handleCreated }; } } 四、文件上传问题

此处以vue2+Springboot为例，代码仅供参考

前端

前端重点在于editorConfig中fileName及server的配置

保存清空 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; export default { components: { Editor, Toolbar }, data() { return { editor: null, html: '

文章内容

', toolbarConfig: {}, editorConfig: { placeholder: '请输入内容...', MENU_CONF: { uploadImage: { fieldName: 'file', server: 'http://localhost:8082/file/uploadTest' } } }, mode: 'default' }; }, methods: { save() { this.$store.state.articleContent = this.html; }, clear() { this.html = ''; }, onCreated(editor) { this.editor = Object.seal(editor); } }, mounted() { setTimeout(() => { this.html = '

暂不支持视频，提交前记得保存

'; }, 2000); }, beforeDestroy() { const editor = this.editor; if (editor == null) return; editor.destroy(); } }; .editor-container { border: 1px solid #ccc; } .editor-container>* { border-bottom: 1px solid #ccc; } .editor-container>button { border: 0; } .editor-container>.w-e-text-container { height: 500px; overflow-y: hidden; }

后端

后端重点在于返回类型及文件大小配置

import com.alibaba.fastjson.JSONObject; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; @RestController @CrossOrigin @RequestMapping("/file") public class FileController { @PostMapping("/uploadTest") @CrossOrigin public JSONObject uploadTest(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletRequest request) throws Exception { String url = upload(file,request); JSONObject jsonObject = new JSONObject(); if(url != null){ jsonObject.put("errno",0); JSONObject jsonObject1 = new JSONObject(); jsonObject1.put("url",url); jsonObject1.put("alt","a2-w1p.jpeg"); jsonObject1.put("href",url); jsonObject.put("data",jsonObject1); }else { jsonObject.put("errno",1); jsonObject.put("message","上传图片失败"); } return jsonObject; } @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException { String filename = file.getOriginalFilename(); String path = request.getServletContext().getRealPath("/upload/"); saveFile(file, path); return "http://localhost:8082/upload/" + filename; } public void saveFile(MultipartFile f, String path) throws IOException { File upDir = new File(path); if (!upDir.exists()) { upDir.mkdir(); } File file = new File(path + f.getOriginalFilename()); f.transferTo(file); } }

yml文件大小配置

servlet: multipart: # 上传文件的最大大小限制 max-file-size: 10MB # 请求的最大大小限制 max-request-size: 10MB

【本文地址】

公司简介

联系我们